<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500" style="border:2px solid #ccc;"></canvas>




    <script>
        var Mycanvas = document.querySelector("#canvas");
        var ctx = Mycanvas.getContext("2d");

        var data = [
            {
                value: 0.3,
                color: "#AAAEEB",
                title: "睡觉"
            },
            {
                value: 0.2,
                color: "#94D8F6",
                title: "学习"
            },
            {
                value: 0.15,
                color: "#98E999",
                title: "运动"
            },
            {
                value: 0.15,
                color: "#98E0AD",
                title: "吃饭"
            },
            {
                value: 0.2,
                color: "#FFCCA9",
                title: "上班"
            }
        ]

        var deg = 0; /* 默认度数 */
        var x0 = y0 = 249; /* 圆心 */
        for (var i = 0; i < data.length; i++) {
            var degs = data[i].value * 360; /* 计算每个扇形的度数 */
            var sAngle = deg * Math.PI / 180; /* 开始弧度 */
            var eAngle = (deg + degs) * Math.PI / 180; /* 结束弧度 */

            ctx.beginPath();
            ctx.fillStyle = data[i].color;
            ctx.moveTo(x0, y0); /* 圆心 */
            ctx.arc(x0, y0, 150, sAngle, eAngle); /* 绘制圆 */
            ctx.fill();
            ctx.closePath();


            // 添加文本
            var Sdeg = deg + degs / 2; /* 角度 */
            var R = 150 + 20; /* 斜边长度 */
            var y = y0 + Math.sin(Sdeg * Math.PI / 180) * R;
            var x = x0 + Math.cos(Sdeg * Math.PI / 180) * R;

            ctx.beginPath();
            if (x < x0) {
                ctx.textAlign = "right";
            } else {
                ctx.textAlign = "left";
            }
            ctx.font = "16px Georgia";
            ctx.fillText(data[i].title, x, y);
            ctx.closePath();



            /* 修改起始位置 */
            deg += degs;

        }

    </script>
</body>

</html>